<template>
    <div class="home" id="app">
      <!-- 头部 -->
      <el-row type="flex" justify="space-between" align="middle">
        <el-col :span="12">
          <div class="logo">宸名小说</div>
        </el-col>
        <el-col :span="12">
          <el-menu mode="horizontal" class="header-menu">
            <el-menu-item index="1" @click="jumpToHomeView">首页</el-menu-item>
            <el-menu-item index="2" @click="jumpToBookStore">书库</el-menu-item>
            <el-menu-item index="3" @click="jumpToBookShelf">书架</el-menu-item> <!-- 添加书架页面链接 -->
            <el-menu-item index="4">好友</el-menu-item>
          </el-menu>
        </el-col>
        <el-col :span="8">
          <el-input
            v-model="searchQuery"
            placeholder="搜索小说"
            class="search-input"
          ></el-input>
          <el-button type="primary" @click="searchNovels">搜索</el-button>
        </el-col>
        <el-col :span="4">
          <el-button type="primary" @click="login">登录</el-button>
          <el-button @click="register">注册</el-button>
        </el-col>
      </el-row>
  
      <!-- 轮播图 -->
      <div class="section-spacing">
        <el-carousel :interval="4000" type="card" height="200px">
          <el-carousel-item
            v-for="(novel, index) in rankingNovels.slice(0, 6)"
            :key="index"
          >
            <img
              :src="novel.cover"
              alt="图书封面"
              style="height: 100%; object-fit: cover"
            />
          </el-carousel-item>
        </el-carousel>
      </div>
  
      <!-- 图书推荐榜 -->
      <div class="section-spacing">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span class="book-recommendation-title">图书推荐榜</span>
          </div>
          <el-row
            v-for="(group, groupIndex) in groupRankingNovels"
            :key="groupIndex"
          >
            <el-col v-for="(novel, index) in group" :key="index" :span="8">
              <el-row type="flex" justify="space-between" align="middle">
                <el-col :span="2">
                  <p class="book-rank">{{ novel.rank }}</p>
                </el-col>
                <el-col :span="6">
                  <p class="book-title">{{ novel.title }}</p>
                  <p class="book-type">{{ novel.type }}</p>
                </el-col>
                <el-col :span="4">
                  <img
                    :src="novel.cover"
                    alt="图书封面"
                    style="width: 100px; height: 150px"
                  />
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </el-card>
  
        <!-- 分页器 -->
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[6, 12, 24, 36]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="rankingNovels.length"
        >
        </el-pagination>
      </div>
  
      <!-- 白金作家 -->
      <div class="section-spacing">
        <el-card class="box-card ">
          <div slot="header" class="clearfix">
            <span class="book-recommendation-title">白金作家</span>
          </div>
          <el-carousel :interval="4000" height="300px">
            <el-carousel-item
              v-for="(authors, groupIndex) in groupPlatinumAuthors"
              :key="groupIndex"
            >
              <el-col v-for="(author, index) in authors" :key="index" :span="6">
                <el-row type="flex" justify="space-between" align="middle">
                  <el-col :span="24">
                    <img
                      :src="author.avatar"
                      alt="作家头像"
                      style="height: 150px"
                    />
                    <p class="author-name author-info">{{ author.name }}</p>
                    <p class="author-honor author-info">{{ author.honor }}</p>
                    <p class="author-masterpiece author-info">
                      {{ author.masterpiece }}
                    </p>
                  </el-col>
                </el-row>
              </el-col>
            </el-carousel-item>
          </el-carousel>
        </el-card>
      </div>
    </div>
  </template>
  <style scoped>
  .author-info {
    font-size: 16px;
    color: #333;
    font-weight: bold;
  }
  
  /* 添加间距样式 */
  .section-spacing {
    margin-bottom: 100px;
  }
  </style>
  
  <script>
  export default {
    data() {
      return {
        searchQuery: "",
        rankingNovels: [
          {
            id: 1,
            rank: 1,
            title: "小说1",
            type: "玄幻",
            cover: require("../assets/logo.png"),
          },
          {
            id: 2,
            rank: 2,
            title: "小说2",
            type: "武侠",
            cover: require("../assets/logo.png"),
          },
          {
            id: 3,
            rank: 3,
            title: "小说3",
            type: "言情",
            cover: require("../assets/logo.png"),
          },
          {
            id: 4,
            rank: 4,
            title: "小说4",
            type: "科幻",
            cover: require("../assets/logo.png"),
          },
          {
            id: 5,
            rank: 5,
            title: "小说5",
            type: "悬疑",
            cover: require("../assets/logo.png"),
          },
          {
            id: 6,
            rank: 6,
            title: "小说6",
            type: "历史",
            cover: require("../assets/logo.png"),
          },
          {
            id: 7,
            rank: 7,
            title: "小说7",
            type: "奇幻",
            cover: require("../assets/logo.png"),
          },
          {
            id: 8,
            rank: 8,
            title: "小说8",
            type: "都市",
            cover: require("../assets/logo.png"),
          },
          {
            id: 9,
            rank: 9,
            title: "小说9",
            type: "军事",
            cover: require("../assets/logo.png"),
          },
          {
            id: 10,
            rank: 10,
            title: "小说10",
            type: "穿越",
            cover: "../assets/cover10.jpg",
          },
          {
            id: 11,
            rank: 11,
            title: "小说11",
            type: "网游",
            cover: "../assets/cover11.jpg",
          },
          {
            id: 12,
            rank: 12,
            title: "小说12",
            type: "修真",
            cover: "../assets/cover12.jpg",
          },
        ],
        platinumAuthors: [
          {
            avatar: require("../assets/logo.png"),
            name: "作家1",
            honor: "白金作家",
            masterpiece: "代表作1",
          },
          {
            avatar: require("../assets/logo.png"),
            name: "作家2",
            honor: "白金作家",
            masterpiece: "代表作2",
          },
          {
            avatar: require("../assets/logo.png"),
            name: "作家3",
            honor: "白金作家",
            masterpiece: "代表作3",
          },
          {
            avatar: require("../assets/logo.png"),
            name: "作家4",
            honor: "白金作家",
            masterpiece: "代表作4",
          },
          {
            avatar: require("../assets/logo.png"),
            name: "作家5",
            honor: "白金作家",
            masterpiece: "代表作5",
          },
          {
            avatar: require("../assets/logo.png"),
            name: "作家6",
            honor: "白金作家",
            masterpiece: "代表作6",
          },
          {
            avatar: require("../assets/logo.png"),
            name: "作家7",
            honor: "白金作家",
            masterpiece: "代表作7",
          },
          {
            avatar: require("../assets/logo.png"),
            name: "作家8",
            honor: "白金作家",
            masterpiece: "代表作8",
          },
        ],
        currentPage: 1,
        pageSize: 6,
      };
    },
    computed: {
      groupRankingNovels() {
        const start = (this.currentPage - 1) * this.pageSize;
        const end = start + this.pageSize;
        return this.rankingNovels
          .slice(start, end)
          .reduce((result, value, index, array) => {
            if (index % 3 === 0) {
              result.push(array.slice(index, index + 3));
            }
            return result;
          }, []);
      },
      groupPlatinumAuthors() {
        const start = 0;
        const end = 8;
        return this.platinumAuthors
          .slice(start, end)
          .reduce((result, value, index, array) => {
            if (index % 4 === 0) {
              result.push(array.slice(index, index + 4));
            }
            return result;
          }, []);
      },
    },
    methods: {
      jumpToHomeView() {
        this.$router.push('/');
      },
      jumpToBookStore() {
        this.$router.push('/bookstore');
      },
      jumpToBookShelf() {
        this.$router.push('/bookshelf'); // 添加跳转到书架页面的方法
      },
      searchNovels() {
        // 在这里实现搜索功能
        console.log("搜索小说:", this.searchQuery);
      },
      login() {
        // 在这里实现登录功能
        console.log("登录");
      },
      register() {
        // 在这里实现注册功能
        console.log("注册");
      },
      handleSizeChange(val) {
        this.pageSize = val;
      },
      handleCurrentChange(val) {
        this.currentPage = val;
      },
    },
     
  };
  </script>
  
  <style scoped>
  .home {
    padding: 20px;
  }
  
  .logo {
    font-size: 24px;
    font-weight: bold;
  }
  
  .search-input {
    width: 200px;
    margin-right: 10px;
  }
  
  .box-card {
    width: 100%;
    margin-bottom: 20px;
  }
  
  .header-menu {
    border-bottom: none;
  }
  
  .book-card {
    display: flex;
    align-items: center;
    margin-bottom: 10px;
  }
  
  .book-info {
    margin-left: 10px;
  }
  
  /* 图书推荐榜标题样式 */
  .book-recommendation-title {
    font-size: 20px;
    font-weight: bold;
    color: #333;
    margin-bottom: 10px;
  }
  
  /* 图书推荐榜内容样式 */
  .book-recommendation-content {
    font-size: 16px;
    color: #666;
  }
  
  /* 图书排名样式 */
  .book-rank {
    font-size: 18px;
    font-weight: bold;
    color: #f00;
  }
  
  /* 图书标题样式 */
  .book-title {
    font-size: 16px;
    font-weight: bold;
    color: #333;
  }
  
  /* 图书类型样式 */
  .book-type {
    font-size: 14px;
    color: #999;
  }
  </style>